<template>
  <view class="payment-page">
    <!-- 支付功能入口 -->
    <view class="payment-functions">
      <!-- 物业费缴费 -->
      <service-card
        title="物业费缴费"
        description="在线缴纳物业费、水电费"
        icon-name="wallet"
        theme-color="#3742fa"
        :badge="propertyFeeBadge"
        badge-icon="exclamation-circle"
        badge-color="#ff4757"
        @click="goToPropertyFee"
      />

      <!-- 停车费缴费 -->
      <service-card
        title="停车费缴费"
        description="缴纳停车费、充电费"
        icon-name="car"
        theme-color="#2ed573"
        :badge="parkingFeeBadge"
        badge-icon="exclamation-circle"
        badge-color="#ff4757"
        @click="goToParkingFee"
      />

      <!-- 其他费用 -->
      <service-card
        title="其他费用"
        description="缴纳其他社区费用"
        icon-name="list"
        theme-color="#ff9500"
        @click="goToOtherFees"
      />

      <!-- 缴费记录 -->
      <service-card
        title="缴费记录"
        description="查看历史缴费记录"
        icon-name="file-text"
        theme-color="#9b59b6"
        @click="goToPaymentRecords"
      />

      <!-- 发票管理 -->
      <service-card
        title="发票管理"
        description="申请、下载电子发票"
        icon-name="receipt"
        theme-color="#27ae60"
        @click="goToInvoice"
      />

      <!-- 支付设置 -->
      <service-card
        title="支付设置"
        description="支付方式、自动缴费"
        icon-name="setting"
        theme-color="#95a5a6"
        @click="goToPaymentSettings"
      />
    </view>
  </view>
</template>

<script setup>
/**
 * 在线支付页面 - 重构版本
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 2.0 - 按照ServiceCard组件规范重构
 */

import { ref, reactive, computed, onMounted } from 'vue'
import ServiceCard from '@/components/ServiceCard.vue'
import { getIconThemeColor } from '@/utils/themeColors'
import { hasMenuPermission } from '@/utils/permission'

// 待缴费账单
const pendingBills = ref([
  {
    id: 1,
    title: '2025年1月物业费',
    type: 'property',
    amount: 150.00,
    dueDate: '2025-01-31',
    statusText: '待缴费',
    statusType: 'warning'
  },
  {
    id: 2,
    title: '2025年1月停车费',
    type: 'parking',
    amount: 80.00,
    dueDate: '2025-01-25',
    statusText: '即将到期',
    statusType: 'error'
  },
  {
    id: 3,
    title: '2024年12月水电费',
    type: 'utility',
    amount: 120.50,
    dueDate: '2025-01-20',
    statusText: '已逾期',
    statusType: 'error'
  }
])

// 最新缴费记录
const recentPayments = ref([
  {
    id: 1,
    title: '2024年12月物业费',
    amount: 150.00,
    method: 'wechat',
    payTime: '2024-12-28 14:30',
    statusText: '支付成功',
    statusType: 'success'
  },
  {
    id: 2,
    title: '2024年12月停车费',
    amount: 80.00,
    method: 'alipay',
    payTime: '2024-12-25 09:15',
    statusText: '支付成功',
    statusType: 'success'
  },
  {
    id: 3,
    title: '2024年11月水电费',
    amount: 95.80,
    method: 'wechat',
    payTime: '2024-11-30 16:45',
    statusText: '支付成功',
    statusType: 'success'
  }
])

// 快速缴费类型
const quickPaymentTypes = ref([
  {
    value: 'property',
    label: '物业费',
    icon: 'home',
    color: '#3742fa'
  },
  {
    value: 'parking',
    label: '停车费',
    icon: 'car',
    color: '#2ed573'
  },
  {
    value: 'utility',
    label: '水电费',
    icon: 'flash',
    color: '#ff9500'
  },
  {
    value: 'other',
    label: '其他费用',
    icon: 'list',
    color: '#9b59b6'
  }
])

// 缴费统计
const statistics = reactive({
  totalPaid: 1250.50,
  pendingCount: 3,
  paidCount: 12
})

// 计算属性
const propertyFeeBadge = computed(() => {
  const count = pendingBills.value.filter(bill => bill.type === 'property').length
  return count > 0 ? count.toString() : ''
})

const parkingFeeBadge = computed(() => {
  const count = pendingBills.value.filter(bill => bill.type === 'parking').length
  return count > 0 ? count.toString() : ''
})

// 获取账单图标
const getBillIcon = (type) => {
  const iconMap = {
    'property': 'home',
    'parking': 'car',
    'utility': 'flash',
    'other': 'list'
  }
  return iconMap[type] || 'file-text'
}

// 获取支付方式图标
const getPaymentIcon = (method) => {
  const iconMap = {
    'wechat': 'wechat',
    'alipay': 'alipay',
    'unionpay': 'credit-card',
    'other': 'wallet'
  }
  return iconMap[method] || 'wallet'
}

// 页面跳转方法
const goToPropertyFee = () => {
  uni.navigateTo({ url: '/pages/payment/property-fee' })
}

const goToParkingFee = () => {
  uni.navigateTo({ url: '/pages/payment/parking-fee' })
}

const goToOtherFees = () => {
  uni.navigateTo({ url: '/pages/payment/other-fees' })
}

const goToPaymentRecords = () => {
  uni.navigateTo({ url: '/pages/payment/list' })
}

const goToInvoice = () => {
  uni.navigateTo({ url: '/pages/payment/invoice-management' })
}

const goToPaymentSettings = () => {
  uni.navigateTo({ url: '/pages/payment/settings' })
}

// 缴费账单
const payBill = (bill) => {
  uni.navigateTo({
    url: `/pages/payment/detail?billId=${bill.id}`
  })
}

// 查看缴费详情
const viewPaymentDetail = (payment) => {
  uni.navigateTo({
    url: `/pages/payment/detail?id=${payment.id}`
  })
}

// 快速缴费
const quickPayment = (type) => {
  uni.navigateTo({
    url: `/pages/payment/quick-pay?type=${type.value}`
  })
}

// 页面加载
onMounted(() => {
  // 加载待缴费账单
  loadPendingBills()
  // 加载缴费记录
  loadPaymentRecords()
  // 加载缴费统计
  loadPaymentStatistics()
})

// 数据加载方法
const loadPendingBills = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载待缴费账单')
  } catch (error) {
    console.error('加载待缴费账单失败:', error)
  }
}

const loadPaymentRecords = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载缴费记录')
  } catch (error) {
    console.error('加载缴费记录失败:', error)
  }
}

const loadPaymentStatistics = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载缴费统计')
  } catch (error) {
    console.error('加载缴费统计失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.payment-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  
  // 小屏幕适配
  @media screen and (max-width: 375px) {
    padding: 12px;
  }
  
  // 中等屏幕适配
  @media screen and (min-width: 376px) and (max-width: 768px) {
    padding: 16px;
  }
  
  // 大屏幕适配
  @media screen and (min-width: 769px) {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

.payment-functions {
  margin-bottom: 20px;
}

.pending-bills,
.recent-payments,
.payment-statistics,
.quick-payment {
  margin-bottom: 20px;
  
  .bill-list,
  .payment-list {
    .bill-item,
    .payment-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .bill-icon,
      .payment-icon {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
      }
      
      .bill-info,
      .payment-info {
        flex: 1;
        min-width: 0;
        
        .bill-header,
        .payment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;
          
          .bill-title,
          .payment-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
          }
        }
        
        .bill-amount,
        .bill-dueDate,
        .payment-amount,
        .payment-time {
          display: block;
          font-size: 12px;
          color: #666;
          margin-bottom: 2px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  
  .statistics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .stat-icon {
        margin-bottom: 8px;
      }
      
      .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        margin-bottom: 4px;
      }
      
      .stat-text {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
    .quick-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
      
      .quick-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
      }
      
      .quick-text {
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style> 